<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="./center-order.html">我的订单</a>
                </li>
                <li>
                    <a href="./center.html">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i>
                        手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="./category01.html">生鲜</a>
                    </li>
                    <li>
                        <a href="./category01.html">美食</a>
                    </li>
                    <li>
                        <a href="./category01.html">餐厨</a>
                    </li>
                    <li>
                        <a href="./category01.html">电器</a>
                    </li>
                    <li>
                        <a href="./category01.html">居家</a>
                    </li>
                    <li>
                        <a href="./category01.html">洗护</a>
                    </li>
                    <li>
                        <a href="./category01.html">孕婴</a>
                    </li>
                    <li>
                        <a href="./category01.html">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="./cart-none.html" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
                </div>
            </div>
        </div>
    </div>
    <div class="xtx-wrapper">
        <div class="container">
            <!-- 卡片 -->
            <div class="xtx-card">
                <h3>新用户注册</h3>
                <form class="xtx-form">
                    <div data-prop="username" class="xtx-form-item">
                        <span class="iconfont icon-zhanghao"></span>
                        <input name="username" type="text" placeholder="设置用户名称">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="phone" class="xtx-form-item">
                        <span class="iconfont icon-shouji"></span>
                        <input name="phone" type="text" placeholder="输入手机号码  ">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="code" class="xtx-form-item">
                        <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
                        <input name="code" type="text" placeholder="短信验证码">
                        <span class="msg"></span>
                        <a class="code" href="javascript:;">发送验证码</a>
                    </div>
                    <div data-prop="password" class="xtx-form-item">
                        <span class="iconfont icon-suo"></span>
                        <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="confirm" class="xtx-form-item">
                        <span class="iconfont icon-suo"></span>
                        <input name="confirm" type="password" placeholder="请再次输入上面密码">
                        <span class="msg"></span>
                    </div>
                    <div class="xtx-form-item pl50">
                        <i class="iconfont icon-queren"></i>
                        已阅读并同意<i>《用户服务协议》</i>
                    </div>
                    <div class="xtx-form-item">
                        <button class="submit">下一步</button>
                        <!-- <a class="submit" href="javascript:;">下一步</a> -->
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="xtx_footer clearfix">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 发送验证码
        const code = document.querySelector('.code')
        let flag = true
        code.addEventListener('click', () => {
            if (flag) {
                flag = false
                let count = 5
                code.innerHTML = `05秒后重新获取`
                const timner = setInterval(() => {
                    count--
                    code.innerHTML = `0${count}秒后重新获取`
                    if (count === 0) {
                        code.innerHTML = '重新获取'
                        clearInterval(timner)
                        flag = true
                    }
                }, 1000)
            }
        })

        // 用户名验证
        const username = document.querySelector('[name=username]')
        username.addEventListener('change', verifyUsername)

        function verifyUsername() {
            const span = username.nextElementSibling
            const regex = /^[a-zA-Z0-9-_]{6,10}$/
            if (!regex.test(username.value)) {
                span.innerText = '输入不合法，请输入6~10位字符'
                return false
            }
            span.innerText = ''
            return true
        }

        // 手机号验证
        const phone = document.querySelector('[name=phone]')
        phone.addEventListener('change', verifyPhone)

        function verifyPhone() {
            const span = phone.nextElementSibling
            const regex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
            if (!regex.test(phone.value)) {
                span.innerText = '输入不合法，请输入正确的手机号'
                return false
            }
            span.innerText = ''
            return true
        }

        // 验证码验证
        const codeInput = document.querySelector("[name=code]")
        codeInput.addEventListener('change', verifyCode)
        function verifyCode() {
            const span = codeInput.nextElementSibling
            const regex = /^\d{6}$/
            if (!regex.test(codeInput.value)) {
                span.innerText = '输入不合法，请输入正确的验证码'
                return false
            }
            span.innerText = ''
            return true
        }

        // 密码验证
        const password = document.querySelector("[name=password]")
        password.addEventListener('change', verifyPassword)
        function verifyPassword() {
            const span = password.nextElementSibling
            const regex = /^\w{6,20}$/
            if (!regex.test(password.value)) {
                span.innerText = '输入不合法，请输入6至20位字母、数字和符号组合'
                return false
            }
            span.innerText = ''
            return true
        }

        // 密码确认验证
        const confirm = document.querySelector("[name=confirm]")
        confirm.addEventListener('change', verifyConfirm)
        function verifyConfirm() {
            const span = confirm.nextElementSibling
            const password = document.querySelector("[name=password]")
            if (!(confirm.value === password.value)) {
                span.innerText = '两次密码不一致请重新输入'
                return false
            }
            span.innerText = ''
            return true
        }

        // 协议确认
        const agree = document.querySelector('.icon-queren')
        agree.addEventListener('click', () => {
            agree.classList.toggle('icon-queren2')
        })

        // 提交表单
        const form = document.querySelector('form')
        form.addEventListener('submit', (e) => {
            if (!agree.classList.contains('icon-queren2')) {
                alert('请勾选协议')
                e.preventDefault()
            }
            if(verifyUsername()) e.preventDefault()
            if(verifyPhone()) e.preventDefault()
            if(verifyCode()) e.preventDefault()
            if(verifyPassword()) e.preventDefault()
            if(verifyConfirm()) e.preventDefault()
        })
    </script>
</body>

</html>